<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背单词网站</title>
    <!-- 引用 CSS 文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面标题 -->
    <h1>就背单词</h1>
    
    <!-- 添加单词区域 -->
    <div class="input-container">
        <input type="text" id="englishInput" placeholder="输入英文单词">
        <input type="text" id="chineseInput" placeholder="输入中文释义">
        <button id="addWordBtn">添加单词</button>
    </div>
    
    <!-- 轮播区域 -->
    <div class="carousel-container">
        <div id="wordDisplay" class="word-display">
            <div id="englishDisplay" class="english-word">暂无单词</div>
            <div id="chineseDisplay" class="chinese-meaning"></div>
        </div>
        <div class="carousel-controls">
            <button id="prevBtn">上一个</button>
            <button id="showChineseBtn">显示释义</button>
            <button id="nextBtn">下一个</button>
        </div>
        <div id="progress" class="progress">0/0</div>
    </div>
    
    <!-- 导入导出区域 -->
    <div class="io-container">
        <button id="exportCsvBtn">导出CSV</button>
        <button id="importCsvBtn">导入CSV</button>
        <input type="file" id="csvFileInput" accept=".csv" style="display: none;">
    </div>
    
    <!-- 单词列表标题 -->
    <div class="list-title">单词库</div>
    <!-- 单词列表 -->
    <ul id="wordList"></ul>

    <!-- 引用 JavaScript 文件 -->
    <script src="script.js"></script>
</body>
</html>